<template>
	<div class="zc">
		<!-- <header class="login-bar bar bar-nav ">
			<span class="icon-login icon icon-left" v-on:click="back"></span>
	  		<h3 class='title title-login'>会员注册</h3>
		</header> -->
		<themeHeader title="会员注册"></themeHeader>
		<div class="zc-list-block list-block">
			<ul>
				<li>
			 		<div class="item-content login-item-content">
		          	<div class="item-media"><i class="icon icon-form-name"></i></div>
		          	<div class="item-inner">
		            <div class="item-input">
		              <input type="name" id="txt" placeholder="用户名">
		            </div>
		          </div>
		        </div>
			 	</li>
				<li>
			 		<div class="item-content login-item-content">
		          	<div class="item-media"><i class="icon icon-form-name"></i></div>
		          	<div class="item-inner">
		            <div class="item-input">
		              <input type="number" class="phone" placeholder="手机号码">
		            </div>
		          </div>
		        </div>
			 	</li>
			 	<li>
		        <div class="item-content login-item-content">
		          <div class="item-media"><i class="icon icon-form-name"></i></div>
		          <div class="item-inner">
		            <div class="item-input">
		              <input type="text" placeholder="验证码">
		            </div>
		            <p class="col-50 "><a href="#" class="button button-success">获取验证码</a></p>
		          </div>
		        </div>
	      	</li>
	      	<li>
		        <div class="item-content login-item-content">
		          <div class="item-media"><i class="icon icon-form-name"></i></div>
		          <div class="item-inner">
		            <div class="item-input">
		              <input type="password" class="pwd" placeholder="密码">
		            </div>
		          </div>
		        </div>
	      	</li>
	      	<li>
		        <div class="item-content login-item-content">
			        <div class="item-media"><i class="icon icon-form-name"></i></div>
			        <div class="item-inner">
			            <div class="item-input">
			              <input type="password" class="pwd" placeholder="重复密码">
			            </div>
			        </div>
		        </div>
	      	</li>
			 	<li>
			 		<div class="item-content login-item-content">
		          <div class="item-media"><i class="icon icon-form-name"></i></div>
		          <div class="item-inner">
		            <div class="item-input">
		              <input type="text" placeholder="邀请码（选填）">
		            </div>
		          </div>
		        </div>
			 	</li>
			</ul>
			<p class="col-50 login-button-p "><div class="button button-success greenbg btn">注册</div></p>
		</div>
	</div>
</template>
<style type="text/css">

	.zc-list-block{
		background: white;
	}
	.zc-list-block ul{
		margin-top:2.15rem;
		/*background: #ddd;*/
	}
	.login-content1{

	}
</style>
<script type="text/javascript">
import ThemeHeader from "../pages/home/component/themeHeader.vue";
	export default {
		components:{
			ThemeHeader,
			// require,
		},
		methods:{
			back:function(){

			}
		},

		mounted(){
			var $name=$("#txt");//用户名
			var $phone=$(".phone");
			var $iphone=$(".phone").val().trim() ;
			var $pwd=$(".pwd");
			var $btn=$(".btn");
			var $shu = /[^\d]/g;
		    var $num = /[^a-zA-Z]/g;
		    var namef = false;
		    var all = false
		    var mima = false;
		    var call = false;
			var bol=false;//是否存在用户名(不存在)
			$btn.on("click",function () {
				if (bol){
				    alert("用户名已存在");
				    return;
				}
				// if ($name.val()==""||$pwd.val()==""||$phone.val()==""){
				//     alert("请输入完整信息");
				//     return;
				// }
				if($pwd.eq(0).val().length<6||$pwd.eq(0).val().length>16){
					alert("密码长度应该为6-16位");
					return;
				}
				// if(!$shu.test($pwd.eq(0).val())){
				// 	alert("密码不能全为数字");
				// 	return;
				// }
				// if(!$num.test($pwd.eq(0).val())){
				// 	alert("密码不能全为字母");
				// 	return;
				// }
				if ($pwd.eq(0).val()!=$pwd.eq(1).val()){
		            alert("密码不一致");
		            return;
				}
				// if(!/^1[3|5|8|4|7][0-9]\d{8}$/.test($phone.val())){
				// 	alert("请输入请正确的11位手机号码");
				// 	return;
				// }
				$.ajax({
			        type:"post",
			        url:"http://localhost:8088/shop2/zhuce.php",
			        data:{type:"add",name:$name.val(),phone:$phone.val(),pwd:$pwd.eq(0).val()},
			        dataType:"json",
			        success:function (data) {
						if (data.bol){
							alert("注册成功");
							console.log($btn);
							// $btn.$router.push('/login');
						}else {
							alert("注册失败");
						}
					}
				});
		    })
			$name.on("change",function () {
				$.ajax({
				    type:"post",
					url:"http://localhost:8088/shop2/zhuce.php",
					data:{type:"checkzc",name:$name.val()},
					dataType:"json",
					success:function (data) {
						bol=data.bol;
						if (data.bol==false){
						    $name.next().html("可以注册").css("color","green");
						}else {
		                    $name.next().html("用户已存在").css("color","red");
						}
		            }
				});
		    })
		}
	}
</script>